<template>
  <div style="position: relative;">
    <div class="ht-head-wrap">
      <div class="title-item">
        <router-link to="/administrative">县情概况</router-link>
      </div>
      <div class="title-item">
        <router-link to="/party">党建引领</router-link>
      </div>
      <div class="ht-top">
        <div class="ht-title"></div>
      </div>
      <div class="title-item title-item-active">
        <router-link to="/econdev/">经济发展</router-link>
      </div>
      <div class="title-item">
        <router-link to="/humanistic">人文旅游</router-link>
      </div>
    </div>

    <div class="ht-content">
      <div class="content-left">
        <left-subcontent></left-subcontent>
        <right-subcontent></right-subcontent>
      </div>
      <div class="content-middle">
        <!-- <iframe id="econ" width="100%" height="100%" frameborder="0" src='https://www.thingjs.com/pp/7eac8d39036000485b785fc5'></iframe> -->
        <div class="budget-plan-box">
          <p class="budget-title">洪洞县一般公共预算收入预期目标</p>
          <div class="budget-body">
            <div class="budget-left-box">
              <p class="txt">预期目标(万元)</p>
              <p class="number">
                <count-to :end="totalDetail.exceptGoal" usegroup></count-to>
              </p>
            </div>
            <div class="budget-right-box">
              <p class="txt">累积完成(万元)</p>
              <p class="number">
                <count-to :end="totalDetail.sumIncome" usegroup></count-to>
              </p>
            </div>
          </div>
        </div>
        <!-- <div class="total-box box-1">
          <p class="total-name">财政收入总支出(万元)</p>
          <p class="total-number">
            <count-to :end="totalDetail.financeOutcome" usegroup></count-to>
          </p>
        </div> -->
        <div class="total-box box-1">
          <p class="total-name">一般公共预算总收入(万元)</p>
          <p class="total-number">
            <count-to :end="totalDetail.financeIncome" usegroup></count-to>
          </p>
        </div>
        <div class="total-box box-2">
          <p class="total-name">洪洞县一般公共预算总收入(万元)</p>
          <p class="total-number">
            <count-to :end="totalDetail.publicIncome" usegroup></count-to>
          </p>
        </div>
        <div class="total-box box-3">
          <p class="total-name">洪洞县一般公共预算总支出(万元)</p>
          <p class="total-number">
            <count-to :end="totalDetail.publicOutcome" usegroup></count-to>
          </p>
          
        </div>
        <div class="total-box box-4">
          <p class="total-name">政府性基金预算总收入(万元)</p>
          <p class="total-number">
            <count-to :end="totalDetail.govIncome" usegroup></count-to>
          </p>
        </div>
        <div class="total-box box-5">
          <p class="total-name">政府性基金预算总支出(万元)</p>
          <p class="total-number">
            <count-to :end="totalDetail.govOutcome" usegroup></count-to>
          </p>
        </div>
        <div class="income-expend-box income-box">
          <div class="card-title">财政收入</div>
          <div class="income-expend-main">
            <common-line-chart ref="incomeLine" :config="incomeLineConfig"></common-line-chart>
          </div>
        </div>
        <div class="income-expend-box expend-box">
          <div class="card-title">财政支出</div>
          <div class="income-expend-main">
            <common-line-chart ref="expendLine" :config="expendLineConfig"></common-line-chart>
          </div>
        </div>
        <div class="map-mask" style="pointer-events: none;">
          <img src="../../assets/imgs/v2/mask-v2.png">
        </div>
      </div>
      <div class="content-right">
        <content-tl></content-tl>
        <content-tr></content-tr>
        <content-bottom></content-bottom>
      </div>
    </div>
  </div>
</template>

<script>
  import leftSubcontent from './leftSubcontent/leftSubcontent.vue';
import rightSubcontent from './leftSubcontent/rightSubcontent.vue';
import contentTl from './rightSubcontent/contentTL.vue';
import contentTr from './rightSubcontent/contentTR.vue';
import contentBottom from './rightSubcontent/contentBottom.vue';
import CommonLineChart from '@/components/common/common-line-chart.vue';
import CountTo from '@/components/count-to'

export default {
  data() {
    return {
      totalDetail:{
        financeOutcome:0,
        exceptGoal:0,
        financeIncome:0,
        sumIncome:0,
        publicOutcome:0,
        publicIncome:0,
        govIncome:0,
        govOutcome:0
      },
      incomeLineConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'income-line',
          x: ['2016年', '2017年', '2018年', '2019年'],
          yOffset: -10,
          y: [
            {
              axis: {
                min: 0,
                max: null
              },
              title: '政府性基金总收入（万元）',
              data: [24271, 17017, 6918, 16126],
              color: '#62B61A'
            },
            {
              title: '洪洞县一般公共预算总收入（万元）',
              data: [65981, 71721, 96250, 93929],
              color: '#3EA2FE'
            },
            {
              title: '一般公共预算总收入（万元）',
              data: [122416, 166055, 203320, 212621],
              color: '#51D6DF'
            }
          ]
        }
      },
      expendLineConfig: {
        request: {
          url: 'url',
          params: {}
        },
        option: {
          id: 'expend-line',
          x: ['2016年', '2017年', '2018年', '2019年'],
          yOffset: -10,
          y: [
            {
              axis: {
                min: 0,
                max: null
              },
              title: '政府性基金总支出（万元）',
              data: [44064, 20882, 22196, 16600],
              color: '#62B61A'
            },
            {
              title: '洪洞县一般公共预算总支出（万元）',
              data: [305075, 318195, 341195, 373283],
              color: '#51D6DF'
            }
          ]
        }
      }
    };
  },
  components: {
    leftSubcontent,
    rightSubcontent,
    contentTl,
    contentTr,
    contentBottom,
    CommonLineChart,
    CountTo
  },
  methods: {
    getTotalInoutcome() {
      this.$get(this.$api.getTotalInoutcome).then(res => {
        if(res.code === 200) {
          let data = res.data;
          this.totalDetail.financeOutcome = data.financeOutcome.total;
          this.totalDetail.exceptGoal = data.exceptGoal.total;
          this.totalDetail.financeIncome = data.financeIncome.total;
          this.totalDetail.sumIncome = data.sumIncome.total;
          this.totalDetail.publicOutcome = data.publicOutcome.total;
          this.totalDetail.publicIncome = data.publicIncome.total;
          this.totalDetail.govIncome = data.govIncome.total;
          this.totalDetail.govOutcome = data.govOutcome.total;
        }
      })
    }
  },
  mounted() {
    this.$refs.incomeLine.initChart();
    this.$refs.expendLine.initChart();

    this.getTotalInoutcome();
  }
};
</script>

<style scoped lang="scss" type="text/scss">
  @import '@/assets/style/economics.scss';
$content-lr-w: 610px;

.income-expend-box {
  width: 930px;
  background: rgba(14, 44, 74, 0.3);
  position: absolute;
  bottom: 30px;
  z-index: 9;

  .card-title {
    position: relative;
    padding-left: 17px;
    margin: 0;
    line-height: 54px;
    color: #eaf4ff;
    font-size: 22px;
  }

  .income-expend-main {
    height: 223px;
    padding: 20px;
    box-sizing: border-box;
  }
}

.income-expend-box::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 54px;
  top: 0;
  left: 0;
  background: url('../../assets/imgs/v2/card-head.png') no-repeat;
}

.income-expend-box::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
  background: url('../../assets/imgs/card-bottom.png') no-repeat;
}

.income-box {
  left: $content-lr-w + 20px;
}
.expend-box {
  right: $content-lr-w + 20px;
}

.box-1 {
   top: 200px;
  right: $content-lr-w + 50px;
}
.box-2 {
   top: 310px;
  right: $content-lr-w + 50px;
}
.box-3 {
   top: 430px;
  right: $content-lr-w + 50px;
}
.box-4 {
   top: 545px;
  right: $content-lr-w + 50px;
}
.box-5 {
   top: 670px;
  right: $content-lr-w + 50px;
}
.box-6 {
   top: 790px;
  right: $content-lr-w + 50px;
}

.budget-plan-box {
  position: absolute;
  top: 196px;
  left: $content-lr-w + 50px;
  width: 414px;
  height: 197px;
  background: rgba(14,44,74,0.3);
  border-radius: 4px;
  z-index: 9;

  .budget-title {
    font-size:20px;
    font-family:Source Han Sans CN;
    font-weight:400;
    color:#6BEEFF;
    text-align: center;
    margin-top: 30px;
  }

  .budget-body {
    display: flex;
    align-items: center;
    margin-top: 30px;
    text-align: center;

    .budget-left-box {
      flex: 1;
      justify-content: center;
      border-right: 1px solid #143761;

      .txt {
        font-size:22px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:#E9F4FF;
      }

      .number {
        font-size:48px;
        font-family:Digitalism;
        font-weight:400;
        color:#3FECFF;
        margin-top: 26px;
      }
    }

    .budget-right-box {
      flex: 1;
      justify-content: center;

      .txt {
        font-size:22px;
        font-family:Source Han Sans CN;
        font-weight:500;
        color:#E9F4FF;
      }

      .number {
        font-size:48px;
        font-family:Digitalism;
        font-weight:400;
        color:#FBCC13;
        margin-top: 26px;
      }
    }
  }
}
</style>
